<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>数据可视化</title>
    <link rel="stylesheet"  href="/xianwangCss/temp.css" />
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
    <script type="text/javascript" src="../../../js/jquery.js"></script>
    <script type="text/javascript" src="../../../js/china.js"></script>
    <script type="text/javascript" src="../../../js/flexible.js"></script>
</head>
<body style="font-size: 24px;">
<!-- 头部的盒子 -->
<header>
    <h1>数据展示</h1>
    <div class="showTime"></div>
    <script>
        var t = null;
        t = setTimeout(time, 1000); //開始运行
        function time() {
            clearTimeout(t); //清除定时器
            dt = new Date();
            var y = dt.getFullYear();
            var mt = dt.getMonth() + 1;
            var day = dt.getDate();
            var h = dt.getHours(); //获取时
            var m = dt.getMinutes(); //获取分
            var s = dt.getSeconds(); //获取秒
            document.querySelector(".showTime").innerHTML =
                "当前时间：" +
                y +
                "年" +
                mt +
                "月" +
                day +
                "日-" +
                h +
                "时" +
                m +
                "分" +
                s +
                "秒";
            t = setTimeout(time, 1000); //设定定时器，循环运行
        }
    </script>
    &
</header>

<!-- 页面主体部分 -->
<section class="mainbox">
    <div class="column">
        <div class="panel rate2">
            <h2>线路调整后地铁乘客增加人数</h2>
            <div class="chart bar1"></div>
            <div class="panel-footer"></div>
        </div>
    </div>
</section>

<script>
    (function() {
        // 1实例化对象
        var myChart = echarts.init(document.querySelector(".rate2 .chart"));
        // 2. 指定配置项和数据
        var option = {
            color: ["#2f89cf"],
            tooltip: {
                trigger: "axis",
                axisPointer: {
                    // 坐标轴指示器，坐标轴触发有效
                    type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            // 修改图表的大小
            grid: {
                left: "0%",
                top: "10px",
                right: "0%",
                bottom: "4%",
                containLabel: true
            },
            xAxis: [
                {
                    type: "category",
                    data: [
                        "2个共站",
                        "3个共站",
                        "4个共站",
                        "5个共站",
                        "6个共站",
                    ],
                    axisTick: {
                        alignWithLabel: true
                    },
                    // 修改刻度标签 相关样式
                    axisLabel: {
                        color: "rgba(255,255,255,.6) ",
                        fontSize: "12"
                    },
                    // 不显示x坐标轴的样式
                    axisLine: {
                        show: false
                    }
                }
            ],
            yAxis: [
                {
                    type: "value",
                    // 修改刻度标签 相关样式
                    axisLabel: {
                        color: "rgba(255,255,255,.6) ",
                        fontSize: 12
                    },
                    // y轴的线条改为了 2像素
                    axisLine: {
                        lineStyle: {
                            color: "rgba(255,255,255,.1)",
                            width: 2
                        }
                    },
                    // y轴分割线的颜色
                    splitLine: {
                        lineStyle: {
                            color: "rgba(255,255,255,.1)"
                        }
                    }
                }
            ],
            series: [
                {
                    name: "增加人数",
                    type: "bar",
                    barWidth: "35%",
                    data: [9317, 16161, 22654,69991, 199682],
                    itemStyle: {
                        // 修改柱子圆角
                        barBorderRadius: 5
                    }
                }
            ]
        };
        // 3. 把配置项给实例对象
        myChart.setOption(option);
        // 4. 让图表跟随屏幕自动的去适应
        window.addEventListener("resize", function() {
            myChart.resize();
        });
    })();
</script>
</body>
</html>
